<template>
    <div class="pagebody">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 包裹上架 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form :inline="true">
                    <el-form-item label="包裹编号">
                        <el-input v-model="searchSet.code" prefix-icon="el-icon-search" clearable placeholder="请输入搜索信息"></el-input>
                    </el-form-item>
                    <el-form-item label="快递单号">
                        <el-input
                            v-model="searchSet.expressNumber"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="入柜经手人">
                        <el-input
                            v-model="searchSet.inUserName"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="入柜起止时间">
                        <el-date-picker
                            v-model="searchSet.startTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        >
                        </el-date-picker>
                        &nbsp; <label>~</label> &nbsp;
                        <el-date-picker
                            v-model="searchSet.endTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        ></el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item label="客户手机号">
            <el-input v-model="searchSet.userMobile"
                      prefix-icon="el-icon-search"
                      clearable
                      placeholder="请输入搜索信息"></el-input>
          </el-form-item> -->

                    <el-form-item label="客户代码">
                        <el-input
                            v-model="searchSet.userCode"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
                </el-form>
            </div>
            <el-table
                :data="tableData"
                v-loading="tableLoading"
                border
                class="table"
                ref="mainTable"
                header-cell-class-name="table-header"
                :row-class-name="tableRowClassName"
            >
                <el-table-column prop="users" :formatter="formatUsersCode" label="用户代码" align="center" />
                <el-table-column prop="addtime" label="录单时间" align="center" />
                <el-table-column prop="expressnumber" label="快递单号" min-width="100" align="center" />
                <el-table-column prop="code" label="包裹编号" min-width="100" align="center" />
                <el-table-column prop="name" label="品名" min-width="100" align="center" />
                <el-table-column prop="count" label="数量" width="50" align="center" />
                <el-table-column prop="weight" label="重量(KG)" width="80" align="center" />

                <el-table-column label="是否带电" width="100" align="center">
                    <template slot-scope="scope">
                        <div v-if="formatUsersHasbattery(scope.row.users) == 1" class="color-red">是</div>
                        <div v-else>否</div>
                    </template>
                </el-table-column>
                <el-table-column label="是否立即转运" width="100" align="center">
                    <template slot-scope="scope">
                        <div v-if="formatUsersCansendasap(scope.row.users) == 1" class="color-red">是</div>
                        <div v-else>否</div>
                    </template>
                </el-table-column>
                <el-table-column prop="intime" label="入柜时间" align="center"></el-table-column>
                <el-table-column prop="location" label="柜架位置" min-width="100" align="center"></el-table-column>
                <el-table-column prop="inusername" label="入柜经手人" align="center"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': orderStatusOption[scope.row.status]
                                    ? orderStatusOption[scope.row.status].color
                                    : '#909399'
                            }"
                        >
                            {{ orderStatusOption[scope.row.status] ? orderStatusOption[scope.row.status].label : '无效' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="120" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-s-order" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                        <el-button type="text" icon="el-icon-edit" @click="handleRepositoryIn(scope.$index, scope.row)">上架</el-button>
                        <el-button
                            type="text"
                            v-if="Number(scope.row.status) == 3"
                            icon="el-icon-edit"
                            @click="handleCheck(scope.$index, scope.row)"
                            >验货</el-button
                        >
                        <el-button
                            type="text"
                            v-if="Number(scope.row.status) == 4"
                            icon="el-icon-edit"
                            @click="handleRefund(scope.$index, scope.row)"
                            >退货</el-button
                        >
                        <el-button
                            type="text"
                            v-if="Number(scope.row.status) == 5"
                            icon="el-icon-edit"
                            @click="handleChange(scope.$index, scope.row)"
                            >换货</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="query.pageSize"
                    :total="itemTotal"
                    @current-change="handlePageChange"
                    @size-change="handlePageSizeChange"
                ></el-pagination>
            </div>
        </div>

        <el-dialog title="上架操作" v-dialogDrag center :visible.sync="editVisible" width="60%">
            <el-form ref="form" :model="form" label-width="200px">
                <el-descriptions :column="1" style="margin-bottom: 20px" border>
                    <el-descriptions-item label="ID">
                        {{ form.id }}
                    </el-descriptions-item>
                    <el-descriptions-item label="快递名称">
                        {{ form.courierName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="快递单号">
                        {{ form.expressnumber }}
                    </el-descriptions-item>
                </el-descriptions>

                <el-form-item label="用户历史存放位置" v-if="form.users && form.users.length && false">
                    <div v-for="(user, i) in form.users" :key="i" class="UserLocationCard">
                        <div>【{{ user.usercode }}】{{ user.username }}</div>
                        <div class="FlexRowWarp">
                            <el-tag
                                hit
                                v-for="(item, index) in user.relatedLocations"
                                :key="index"
                                @click="tapLocation(item)"
                                style="margin-right: 10px"
                                >{{ item }}</el-tag
                            >
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="存放位置">
                    <el-select v-model="form.repositoryregionid" style="width: 20%" placeholder="区域" @change="regionChange">
                        <el-option v-for="item in RegionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <span style="margin: 0 10px">区域</span>
                    <el-select v-model="form.repositoryshelfid" style="width: 20%" placeholder="货架" @change="shelfChange">
                        <el-option v-for="item in ShelfList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                    <span style="margin: 0 10px">货架</span>
                    <el-select v-model="form.repositorylayerid" style="width: 20%" placeholder="货架">
                        <el-option v-for="item in LayerList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                    <span style="margin: 0 10px">层</span>
                    <el-input v-model="form.repositorynumber" style="width: 30%" placeholder="编号" autofocus maxlength="10" clearable>
                    </el-input>
                    <span style="margin: 0 10px">号</span>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
                <el-button type="primary" @click="printTag">打 印</el-button>
            </span>
        </el-dialog>
        <el-dialog title="验货操作" v-dialogDrag center :visible.sync="checkVisible" width="60%">
            <el-form ref="checkform" :model="checkform" :rules="checkformRules" label-width="120px">
                <el-descriptions :column="1" style="margin-bottom: 20px" border>
                    <el-descriptions-item label="ID">
                        {{ checkform.id }}
                    </el-descriptions-item>
                    <el-descriptions-item label="备注">
                        {{ checkform.checkremark }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-form-item label="图片">
                    <customUpload
                        accept="image/*"
                        ref="UploadCheckImage"
                        :limit="3"
                        listType="picture-card"
                        tip="只能上传jpg/png文件"
                        v-on:update:idlist="UpdateCheckImageList"
                    >
                    </customUpload>
                </el-form-item>
                <el-form-item label="视频">
                    <customUpload
                        accept="video/*"
                        ref="UploadCheckVideo"
                        :limit="3"
                        tip="只能上传视频文件"
                        v-on:update:idlist="UpdateCheckVideoList"
                    >
                    </customUpload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="checkVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCheck">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="退货操作" v-dialogDrag center :visible.sync="refundVisible" width="60%">
            <el-form ref="refundform" :model="refundform" :rules="refundformRules" label-width="120px">
                <el-descriptions :column="1" style="margin-bottom: 20px" border>
                    <el-descriptions-item label="ID">
                        {{ refundform.id }}
                    </el-descriptions-item>
                    <el-descriptions-item label="退货码">{{ refundform.refundcode }}</el-descriptions-item>
                    <el-descriptions-item label="备注">
                        {{ refundform.refundremark }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-form-item label="图片">
                    <customUpload
                        accept="image/*"
                        ref="UploadRefundImage"
                        :limit="3"
                        listType="picture-card"
                        tip="只能上传jpg/png文件"
                        v-on:update:idlist="UpdateRefundImageList"
                    >
                    </customUpload>
                </el-form-item>
                <el-form-item label="视频">
                    <customUpload
                        accept="video/*"
                        ref="UploadRefundVideo"
                        :limit="3"
                        tip="只能上传视频文件"
                        v-on:update:idlist="UpdateRefundVideoList"
                    >
                    </customUpload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="refundVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRefund">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="换货操作" v-dialogDrag center :visible.sync="changeVisible" width="60%">
            <el-form ref="changeform" :model="changeform" :rules="changeformRules" label-width="120px">
                <el-descriptions :column="1" style="margin-bottom: 20px" border>
                    <el-descriptions-item label="ID">
                        {{ changeform.id }}
                    </el-descriptions-item>
                    <el-descriptions-item label="换货码">{{ changeform.changecode }}</el-descriptions-item>
                    <el-descriptions-item label="备注">
                        {{ changeform.changeremark }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-form-item label="图片">
                    <customUpload
                        accept="image/*"
                        ref="UploadChangeImage"
                        :limit="3"
                        listType="picture-card"
                        tip="只能上传jpg/png文件"
                        v-on:update:idlist="UpdateChangeImageList"
                    >
                    </customUpload>
                </el-form-item>
                <el-form-item label="视频">
                    <customUpload
                        accept="video/*"
                        ref="UploadChangeVideo"
                        :limit="3"
                        tip="只能上传视频文件"
                        v-on:update:idlist="UpdateChangeVideoList"
                    >
                    </customUpload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="changeVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveChange">确 定</el-button>
            </span>
        </el-dialog>
        <detailDialog :visible.sync="detailVisible" :data="detailInfo" :dataType="detailType">
            <template v-slot:users>
                <template v-if="detailInfo.users && detailInfo.users.length > 0">
                    <template v-for="(item, index) in detailInfo.users">
                        <el-descriptions-item :key="index" :label="`预报用户(第${index + 1}预报)`" :span="2">
                            <div class="RowLineSpaceBetween">
                                <div style="flex: 1">用户代码：{{ item.usercode }}</div>
                                <!-- <div style="flex: 1.5">用户姓名：{{ item.username ? item.username : '无名称' }}</div>
                <div style="flex: 1">用户手机号：{{ item.usermobile }}</div> -->
                            </div>
                        </el-descriptions-item>
                    </template>
                </template>
                <el-descriptions-item label="用户信息" :span="2" v-else> 无绑定用户 </el-descriptions-item>
            </template>
        </detailDialog>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import StringTool from '../../../utils/StringTool';
import JSTool from '../../../utils/JSTool';
import MainTool from '../../../utils/MainTool';
import dataTable from './dataTable';
import detailDialog from '../../common/dialog/detailDialog.vue';
import axios from 'axios';

import customUpload from '../../common/upload/customUpload.vue';
import api from '../../../api/index';
export default {
    name: 'packageInTable',
    mixins: [dataTable],
    components: {
        detailDialog,
        customUpload
    },
    data() {
        return {
            searchSet: {
                expressNumber: '',
                startTime: '',
                endTime: '',
                code: '',
                userCode: '',
                userMobile: '',
                inUserName: ''
            },
            query: {
                index: 1,
                pageSize: 10
            },
            editVisible: false,
            checkVisible: false,
            changeVisible: false,
            refundVisible: false,
            checkform: {},
            checkformRules: {},
            refundform: {},
            refundformRules: {},
            changeform: {},
            changeformRules: {},
            form: {
                repositoryregionid: '',
                repositoryshelfid: '',
                repositorylayerid: '',
                repositorynumber: '',
                id: ''
            },
            locatAOption: [],
            locatBOption: [],
            RepositoryList: [],
            RegionList: [],
            ShelfList: [],
            LayerList: [],
            detailVisible: false,
            detailInfo: {},
            detailType: [
                {
                    attrs: { column: 2 },
                    list: [
                        { label: '包裹编号', key: 'code' },
                        { label: '品名', key: 'name' },
                        { label: '快递名称', key: 'courierName' },
                        { label: '快递单号', key: 'expressnumber' },
                        { label: '重量', key: 'weight' },
                        { label: '数量', key: 'count' },
                        { label: '货架位置', key: 'location' },
                        { label: '上架经手人', key: 'inusername' },
                        { key: 'users', type: 'slot' },
                        { label: '图片列表', key: 'images', span: 2, type: 'imageList' },
                        { label: '视频列表', key: 'videos', span: 2, type: 'videoList' }
                    ]
                }
            ],
            orderStatusOption: {
                0: { label: '无效', value: '0', color: '#909399' },
                1: { label: '已入库', value: '1', color: '#409EFF' },
                2: { label: '已上架', value: '2', color: 'rgb(0, 95, 217)' },
                3: { label: '待验货', value: '3', color: '#e6b600' },
                4: { label: '待退货', value: '4', color: '#e6b600' },
                5: { label: '待换货', value: '5', color: '#e6b600' },
                6: { label: '已出库', value: '6', color: '#67C23A' },
                7: { label: '已验货', value: '7', color: '#cda819' },
                8: { label: '已退货', value: '8', color: '#cda819' },
                9: { label: '已换货', value: '9', color: '#cda819' }
            }
        };
    },
    created() {
        this.init();
    },
    mounted() {},
    methods: {
        //页面初始化
        init() {
            this.getData();
            let locatAList = [];
            for (let i = 0; i < 26; i++) {
                locatAList.push({
                    label: String.fromCharCode(65 + i),
                    value: String.fromCharCode(65 + i)
                });
            }
            this.locatAOption = locatAList;
            let locatBList = [];
            for (let i = 0; i < 26; i++) {
                locatBList.push({
                    label: String(i + 1),
                    value: String(i + 1)
                });
            }
            this.locatBOption = locatBList;

            API.StandardDoWith(API.Repository.Get({ pageSize: 99, status: 1 }), this, {
                success: (detail) => {
                    this.RepositoryList = detail.list;
                }
            });
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.RepositoryInExport(), '包裹上架数据.xlsx');
                })
                .catch((err) => {});
        },
        getData() {
            this.tableLoading = true;
            API.StandardDoWith(API.RepositoryIn.Get(this.getQuery()), this, {
                success: (detail) => {
                    this.itemTotal = detail.count;
                    this.tableData = detail.list;
                },
                complete: () => {
                    this.tableLoading = false;
                }
            });
        },
        requestRepositoryIn(id, repositoryregionid, repositoryshelfid, repositorylayerid, repositorynumber) {
            API.StandardDoWith(
                API.RepositoryIn.Post({ id, repositoryregionid, repositoryshelfid, repositorylayerid, repositorynumber }),
                this,
                {
                    success: (detail) => {
                        this.editVisible = false;
                        this.$message.success(`入柜操作成功`);
                        this.getData();
                    }
                }
            );
        },

        handleDetail(index, row) {
            this.detailVisible = true;

            let obj = JSTool.DeepClone(row);
            obj.images = MainTool.FileIdToUrl(obj.images);
            obj.videos = MainTool.FileIdToUrl(obj.videos);
            this.detailInfo = obj;
        },

        // 编辑操作
        handleRepositoryIn(index, row) {
            //仅单层拷贝
            let obj = JSTool.DeepClone(row);
            this.form = obj;

            if (!this.form.location) {
                //没有位置，使用用户上次消息
                if (row.users && row.users.length > 0) {
                    for (let user of row.users) {
                        if (user.relatedPackageLocations && user.relatedPackageLocations.length > 0) {
                            for (let relatedPackageLocation of user.relatedPackageLocations) {
                                this.form.repositoryregionid = relatedPackageLocation.repositoryregionid;
                                this.form.repositoryshelfid = relatedPackageLocation.repositoryshelfid;
                                this.form.repositorylayerid = relatedPackageLocation.repositorylayerid;
                                this.form.repositorynumber = relatedPackageLocation.repositorynumber;
                                break;
                            }
                            break;
                        }
                    }
                }
            }

            for (let rep of this.RepositoryList) {
                if (rep.id == row.repositoryid) {
                    this.RegionList = rep.regions;
                }
            }
            for (let region of this.RegionList) {
                if (region.id == row.repositoryregionid) {
                    this.ShelfList = region.shelfs;
                }
            }
            for (let shelf of this.ShelfList) {
                if (shelf.id == row.repositoryshelfid) {
                    this.LayerList = shelf.layers;
                }
            }

            // if (StringTool.Empty(obj.location) && obj.users) {
            //   for (let i = 0; i < obj.users.length; i++) {
            //     if (obj.users[i].relatedLocations.length > 0) {
            //       obj.location = obj.users[i].relatedLocations[obj.users[i].relatedLocations.length - 1];
            //       break;
            //     }
            //   }
            // }
            //this.buildLocat(obj);

            this.editVisible = true;
        },
        UpdateCheckImageList(idlist) {
            this.checkform.images = idlist;
        },
        UpdateCheckVideoList(idlist) {
            this.checkform.videos = idlist;
        },
        UpdateRefundImageList(idlist) {
            this.refundform.images = idlist;
        },
        UpdateRefundVideoList(idlist) {
            this.refundform.videos = idlist;
        },
        UpdateChangeImageList(idlist) {
            this.changeform.images = idlist;
        },
        UpdateChangeVideoList(idlist) {
            this.changeform.videos = idlist;
        },
        handleCheck(index, row) {
            let obj = JSTool.DeepClone(row);
            console.log(obj.id);
            this.checkform = {
                id: obj.id,
                checkremark: obj.checkremark,
                images: [],
                videos: []
            };
            this.checkVisible = true;
        },
        saveCheck() {
            this.$refs.checkform.validate((valid) => {
                if (valid) {
                    let checkform = Object.assign({}, this.checkform);
                    this.requestCheck(checkform);
                } else {
                    this.$message.error(`表单验证失败，无法提交`);
                    return false;
                }
            });
        },
        requestCheck(data) {
            API.StandardDoWith(API.PackageCheck.Put(data), this, {
                loading: '包裹验货处理中',
                success: (detail) => {
                    this.checkVisible = false;
                    this.$message.success(`包裹验货成功`);
                    this.$refs.UploadCheckImage.Clear();
                    this.$refs.UploadCheckVideo.Clear();
                    this.getData();
                }
            });
        },
        handleRefund(index, row) {
            let obj = JSTool.DeepClone(row);
            console.log(obj.id);
            this.refundform = {
                id: obj.id,
                refundcode: obj.refundcode,
                refundremark: obj.refundremark,
                images: [],
                videos: []
            };
            this.refundVisible = true;
        },
        saveRefund() {
            this.$refs.refundform.validate((valid) => {
                if (valid) {
                    let refundform = Object.assign({}, this.refundform);
                    this.requestRefund(refundform);
                } else {
                    this.$message.error(`表单验证失败，无法提交`);
                    return false;
                }
            });
        },
        requestRefund(data) {
            API.StandardDoWith(API.PackageRefund.Put(data), this, {
                loading: '包裹退货处理中',
                success: (detail) => {
                    this.refundVisible = false;
                    this.$message.success(`包裹退货成功`);
                    this.$refs.UploadRefundImage.Clear();
                    this.$refs.UploadRefundVideo.Clear();
                    this.getData();
                }
            });
        },
        handleChange(index, row) {
            let obj = JSTool.DeepClone(row);
            console.log(obj.id);
            this.changeform = {
                id: obj.id,
                changecode: obj.changecode,
                changeremark: obj.changeremark,
                images: [],
                videos: []
            };
            this.changeVisible = true;
        },
        saveChange() {
            this.$refs.changeform.validate((valid) => {
                if (valid) {
                    let changeform = Object.assign({}, this.changeform);
                    this.requestChange(changeform);
                } else {
                    this.$message.error(`表单验证失败，无法提交`);
                    return false;
                }
            });
        },
        requestChange(data) {
            API.StandardDoWith(API.PackageChange.Put(data), this, {
                loading: '包裹换货处理中',
                success: (detail) => {
                    this.changeVisible = false;
                    this.$message.success(`包裹换货成功`);
                    this.$refs.UploadChangeImage.Clear();
                    this.$refs.UploadChangeVideo.Clear();
                    this.getData();
                }
            });
        },
        buildLocat(obj) {
            if (obj.location) {
                let locat = obj.location.split(new RegExp('\u533a'), 2);
                if (locat.length == 2) {
                    obj.locatA = locat[0];
                    locat = locat[1].split(new RegExp('\u67b6'), 2);
                } else {
                    locat = obj.location.split(new RegExp('\u67b6'), 2);
                }
                if (locat.length == 2) {
                    obj.locatB = locat[0];
                    obj.locatCode = locat[1];
                } else {
                    obj.locatCode = obj.location;
                }
            }
        },
        tapLocation(item) {
            this.form.location = item;
            this.buildLocat(this.form);
        },
        // 保存编辑
        saveEdit() {
            let { id, repositoryregionid, repositoryshelfid, repositorylayerid, repositorynumber } = this.form;
            if (!repositoryregionid || StringTool.Empty(repositoryregionid.trim())) {
                this.$message.error(`请填写货架位置`);
                return false;
            }
            if (!repositoryshelfid || StringTool.Empty(repositoryshelfid.trim())) {
                this.$message.error(`请填写货架位置`);
                return false;
            }
            if (!repositorylayerid || StringTool.Empty(repositorylayerid.trim())) {
                this.$message.error(`请填写货架位置`);
                return false;
            }

            if (!repositorynumber || StringTool.Empty(repositorynumber.trim())) {
                this.$message.error(`请填写货架位置`);
                return false;
            }
            // let location = locatCode;
            // if (locatB) location = locatB + '架' + location;
            // if (locatA) location = locatA + '区' + location;
            this.requestRepositoryIn(id, repositoryregionid, repositoryshelfid, repositorylayerid, repositorynumber);
        },
        tableRowClassName({ row, rowIndex }) {
            if (row.location) {
                return 'success-row';
            }
            return 'warning-row';
        },
        formatUsersCode(row, column, cellValue, index) {
            if (cellValue.length == 0) return '————';
            return cellValue[0].usercode;
        },
        formatUsersHasbattery(v) {
            if (v) {
                for (let item of v) {
                    if (item.hasbattery) return 1;
                }
            }
            return 0;
        },
        formatUsersCansendasap(v) {
            if (v) {
                for (let item of v) {
                    console.log(item);
                    if (item.cansendasap) return 1;
                }
            }
            return 0;
        },
        regionChange(val) {
            this.ShelfList = [];
            this.LayerList = [];
            this.form.repositoryshelfid = '';
            this.form.repositorylayerid = '';
            for (let region of this.RegionList) {
                if (region.id == val) {
                    this.ShelfList = region.shelfs;
                }
            }
        },
        shelfChange(val) {
            this.LayerList = [];
            this.form.repositorylayerid = '';
            for (let shelf of this.ShelfList) {
                if (shelf.id == val) {
                    this.LayerList = shelf.layers;
                }
            }
        },
        printTag() {
            let { repositoryregionid, repositoryshelfid, repositorylayerid, repositorynumber, code } = this.form;
            if (!repositoryregionid || StringTool.Empty(repositoryregionid.trim())) {
                this.$message.error(`请填写货架位置`);
                return false;
            }
            if (!repositoryshelfid || StringTool.Empty(repositoryshelfid.trim())) {
                this.$message.error(`请填写货架位置`);
                return false;
            }
            if (!repositorylayerid || StringTool.Empty(repositorylayerid.trim())) {
                this.$message.error(`请填写货架位置`);
                return false;
            }

            if (!repositorynumber || StringTool.Empty(repositorynumber.trim())) {
                this.$message.error(`请填写货架位置`);
                return false;
            }
            let repositoryregionname = '';
            let repositoryshelfname = '';
            let repositorylayername = '';
            for (let region of this.RegionList) {
                if (region.id == repositoryregionid) {
                    repositoryregionname = region.name;
                    break;
                }
            }
            for (let shelf of this.ShelfList) {
                if (shelf.id == repositoryshelfid) {
                    repositoryshelfname = shelf.name;
                    break;
                }
            }
            for (let layer of this.LayerList) {
                if (layer.id == repositorylayerid) {
                    repositorylayername = layer.name;
                    break;
                }
            }
            console.log(repositoryregionname, repositoryshelfname, repositorylayername, repositorynumber, code);
            let printUrl =
                'http://localhost:9027/api/print?l=' +
                repositoryregionname +
                repositoryshelfname +
                repositorylayername +
                repositorynumber +
                '&b=' +
                code;

            axios.get(printUrl);
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
.RowLineSpaceBetween {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.UserLocationCard {
    padding: 5px;
    margin: 5px 0;
    border-radius: 5px;
    border: 1px solid #ebeef5;
}
</style>
